var _inherit = require('core/inherit.js');
var _UIContainer = require('component/uicontainer.js');
var _layout = require('tools/layout.js');
var _relative = _layout.relative;

var _Materials = require('global/materials.js');
var _Event = require('component/event.js');
var TWEEN = require('third_party/tweenjs/tween.js');

var _global = require('global/global.js');
var R = require('res/texture.js').R;
var S = require('res/style.js');
var _Constance = require('./constance.js');

var _Helper = require('scenes/widget/tweenhelp.js');
var _UIUtils = require('scenes/game/utils.js');

// ==========================
// TextView
// ==========================
function TitleView() {
    _UIContainer.call(this);
    this.mEvents = new _Event();

    this.move = 0;
    this.alpha = 1;

    this.mAlpha = _Helper.createColor();
    this.mAlpha.setAlpha(1);
    this.mSrollOffset = _Helper.createPoint();
    this.mSrollOffset.setDirection(0, 1);// scroll to top

    this.setSize(_Constance.titleSize);
}
_inherit(TitleView, _UIContainer);
_Event.EnableClass(TitleView, 'mEvents');
TitleView.prototype.setScrollOffset = function (offset) {
    this.setPosition(this.mSrollOffset.getPosition(offset));
};
TitleView.prototype.onFadeoutFinished = function () {
    this.fire('finishshowing', this);
};
TitleView.prototype.onUpdate = function () {
    this.mAlpha.setAlpha(this.alpha);
};
TitleView.prototype.fadeIn = function () {
    this.move = _Constance.titleSize[1];
    this.alpha = 0;
    new TWEEN.Tween(this)
        .to({move: 0, alpha: 1}, 0.3)
        .onUpdate(this.onUpdate)
        .easing(TWEEN.Easing.Cubic.Out)
        .start();
};
TitleView.prototype.onFadeOutStart = function () {
};
TitleView.prototype.fadeOut = function () {
    this.move = 0;
    this.alpha = 1;
    new TWEEN.Tween(this)
        .to({alpha: 0}, 0.3 * 0.618)
        .onStart(this.onFadeOutStart)
        .onUpdate(this.onUpdate)
        .onComplete(this.onFadeoutFinished)
        .easing(TWEEN.Easing.Cubic.In)
        .start();
};
TitleView.prototype.drawAlpha = function (context) {
};
TitleView.prototype.drawNormal = function (context) {
};
TitleView.prototype.drawContent = function (context) {
    _Materials.globalColor(this.mAlpha.alphaColor());
    this.drawAlpha(context);
    _Materials.globalColor(this.mAlpha.originalColor());
    this.drawNormal(context);
};

// ==========================
// TextTitle
// ==========================
function TextTitle(button, text) {
    TitleView.call(this);

    this.mMove = _Helper.createPoint();
    this.mMove.setDirection(0, 1);

    this.addChild(this.mButton = button);
    this.addChild(this.mText = S.menu.title.name.createText(text));

    this.layout();
}
_inherit(TextTitle, TitleView);
TextTitle.prototype.mTag = 'TextTitle';
TextTitle.prototype.layout = function () {
    this.mButton.setAnchor(0.5, 0.5);
    this.mText.setAnchor(0.5, 0.5);

    var offset = 74;
    _relative.local.layoutTo(this.mButton, 1, 0.5, this, 0.5, 0.5, -offset, 0);
    this.mText.setPosition(480 * 0.61, _Constance.titleSize[1] * 0.5 - 10);

    this.mMove.setPosition(this.mText.getPosition());
};
TextTitle.prototype.onUpdate = function () {
    this.mAlpha.setAlpha(this.alpha);
    this.mText.setPosition(this.mMove.getPosition(this.move));
};
TextTitle.prototype.drawNormal = function (context) {
    this.mButton.draw(context);
};
TextTitle.prototype.drawAlpha = function (context) {
    this.mText.draw(context);
};
TextTitle.prototype.onFadeOutStart = function () {
    this.mText.setPosition(this.mMove.getPosition(0));
};

// ==========================
// TextTitle
// ==========================
function ButtonTitle(b1, b2) {
    TitleView.call(this);

    this.mMove = _Helper.createPoint();
    this.mMove.setDirection(0, 1);

    this.addChild(this.mButton1 = b1);
    this.addChild(this.mButton2 = b2);

    this.layout();
}
_inherit(ButtonTitle, TitleView);
ButtonTitle.prototype.mTag = 'ButtonTitle';
ButtonTitle.prototype.layout = function () {
    this.mButton1.setAnchor(0.5, 0.5);
    this.mButton2.setAnchor(0.5, 0.5);

    var offset = 74;
    _relative.local.layoutTo(this.mButton1, 1, 0.5, this, 0.5, 0.5, -offset, 0);
    _relative.local.layoutTo(this.mButton2, 0, 0.5, this, 0.5, 0.5, offset, 0);

    this.mMove.setPosition(this.mButton2.getPosition());
};
ButtonTitle.prototype.onFadeOutStart = function () {
    this.mButton2.setPosition(this.mMove.getPosition(0));
};
ButtonTitle.prototype.onUpdate = function () {
    this.mAlpha.setAlpha(this.alpha);
    this.mButton2.setPosition(this.mMove.getPosition(this.move));
};
ButtonTitle.prototype.drawNormal = function (context) {
    this.mButton1.draw(context);
};
ButtonTitle.prototype.drawAlpha = function (context) {
    this.mButton2.draw(context);
};

// ==========================
// Title
// ==========================
function WrapView(child) {
    _UIContainer.call(this);

    this.addChild(this.mInner = child);
    this.setSize(_Constance.titleSize);
}
_inherit(WrapView, _UIContainer);
WrapView.prototype.mTag = 'WrapView';
WrapView.prototype.fadeIn = function () {
    this.mInner.fadeIn();
};
WrapView.prototype.fadeOut = function () {
    this.mInner.fadeOut();
};

// ---------------- export
/**
 * retry|back and share
 * @returns {ButtonTitle}
 */
exports.buttonTitle = function () {
    var local = _Constance.getLocal();
    var b1;
    if (local.find('retry')) {
        b1 = _UIUtils.greenButton('retry', 'Retry');
    } else {
        b1 = _UIUtils.greenButton('back', 'Back');
    }
    var b2 = _UIUtils.redButton('share', 'Facebook', 0.7);
    var menu = local.find('scene.menu');
    b1.on('click', menu.onButtonClick, menu);
    b2.on('click', menu.onButtonClick, menu);
    return new ButtonTitle(b1, b2);
};
/**
 * @param bt retry
 * @param text content
 * @returns {TextTitle}
 */
exports.textTitle = function (text) {
    var local = _Constance.getLocal();
    var bt;
    if (local.find('retry')) {
        bt = _UIUtils.greenButton('retry', 'Retry');
    } else {
        bt = _UIUtils.greenButton('back', 'Back');
    }
    var menu = local.find('scene.menu');
    bt.on('click', menu.onButtonClick, menu);
    return new TextTitle(bt, text);
};
exports.wrap = function (view) {
    return new WrapView(view);
};
